<template>
  <div class="register fromBox">
    <h1>注册</h1>
    <p><label for="username">用户名</label></p>
    <el-input id='username' placeholder="请输入内容" v-model="userData.reusername" clearable @change="isExist()"> </el-input>
    <p><label for="password">密码</label></p>
    <el-input id='password' placeholder="请输入密码" v-model="userData.repassword" show-password></el-input>
    <p><label for="repassword">确认密码</label></p>
    <el-input id='repassword' placeholder="请输入密码" v-model="userData.copassword" show-password></el-input>
    <p>
      <el-button v-show="isShowBtn" type="primary" plain @click="register()" >注册</el-button>
      <el-button v-show="!isShowBtn" type="primary" plain @click="register()" disabled>注册</el-button>
    </p>

    <p class="toggle">
      <a href="javasript:void(0)" id="goRegister" @click='$router.push("/login")'>登录</a>
    </p>

    <h1 id="sysTitle" @click='$router.push("/stuSystem")'><a href="javascript:void(0)">Sam9029 Student System</a></h1>
  </div>
</template>

<script>
// @ is an alias to /src
import api from '@/http/api/apis'

export default {
  data() {
    return {
      userData:{
        reusername:'',
        repassword:'',
        copassword:''
      },
      isShowBtn:true,
      
    };
  },
  methods:{
    
    //用户名验证操作
    async isExist(){
      this.isShowBtn = true;

      const {data} = await api.loginApi.isExist({username:this.userData.reusername});
      console.log(data);
      if(data.status){
        //可关闭的浮动弹窗提示
        this.$notify.success({
          title: "提示",
          message: data.message
        });
      }else{
        if(data.code){
          this.$notify.warning({
            title: '提示！',
            message: data.message
          });
          
          //控制 v-show 展示 注册 按钮
          this.isShowBtn = false;
          
        }else{
          this.$notify.error({
            title: '错误提示！',
            message: data.message
        });
        }
      }     
    },

    //注册操作
    async register(){
      const {data} = await api.loginApi.register(this.userData);
      console.log(data);
      if(data.status){
        //可关闭的浮动弹窗提示
        const h = this.$createElement;
        this.$notify({
          title: data.message,
          message: h('i', { style: 'color: teal'}, '请到 登录 页面 登录您的账户！')
        });

        this.$router.push('/login')
      }else{
        this.$notify.error({
          title: '错误提示！',
          message: data.message
        });
      }
    }
  }
};
</script>

<style scoped lang='scss' src="../assets/login.scss">